<template>
  <div class="layout" :class="{ dishidden: dishidden }">
    <div class="reader-page" v-if="$route.meta.global">
      <router-view />
    </div>
    <div class="fluid" v-else>
      <div class="banner-back">
        <div class="top-box">
          <header-bar>
            <div slot="home" class="home-header-bar">
              <span class="logo" @click="goHome">
                <svg-icon icon-class="logo"></svg-icon>
              </span>

              <!-- :attr="{autofocus: false}" -->
              <mt-search
                v-model="searchValue"
                ref="mtSearch"
                @keyup.enter.native="search(searchValue)"
                cancel-text="Cancel"
                placeholder="Search novel/author"
              >
              </mt-search>
              <dl
                v-if="userInfo"
                @click="popupVisible('login')"
                class="userInfo"
              >
                <dt>
                  <img class="avatar" :src="userInfo.coverUrl" />
                </dt>
                <dd @click="logoutPopup = true">
                  <span class="ellipsis" v-text="userInfo.authorName"></span>
                  <svg-icon icon-class="downIcon"></svg-icon>
                </dd>
              </dl>
              <mt-button
                v-else
                class="login-btn"
                size="small"
                plain
                @click="popupVisible('login')"
                >Log in</mt-button
              >
            </div>
          </header-bar>
          <nav-bar>
            <div slot="home" class="home-nav-bar">
              <li
                @click="toggleNav(item)"
                v-for="item in navList"
                :key="item.id"
                class="nav-li"
                v-text="item.navName"
                :class="item.name === $route.name ? 'active' : ''"
              >
                <!-- <router-link
                  :to="item.url"
                  @click.native.capture="item.name == $route.name && flushCom()"
                ></router-link> -->
              </li>
            </div>
          </nav-bar>
        </div>
      </div>
      <main>
        <!-- <transition enter-active-class="bounceIn"
                      leave-active-class="bounceOut"
                      :duration="{ enter: 200, leave: 2000 }"> -->
        <keep-alive>
          <!-- v-if="$route.meta.keepAlive" -->
          <router-view class="animated" :key="key" />
        </keep-alive>
        <!-- <router-view v-if="!$route.meta.keepAlive" /> -->
        <!-- </transition> -->
      </main>
      <footer>
        <div class="foot-list">
          <ul v-for="item of footList" :key="item.title">
            <p v-text="item.title"></p>
            <li v-for="val of item.list" :key="val.txt" v-text="val.txt"></li>
          </ul>
        </div>
        <p>Download our APP</p>
        <div class="foot-down">
          <mt-button @click="toDownloadUrl('google')">
            <svg-icon icon-class="googleIcon" slot="icon"></svg-icon>
            Google Play
          </mt-button>
          <mt-button @click="toDownloadUrl('apple')">
            <svg-icon icon-class="appleIcon" slot="icon"></svg-icon>
            Apple Store
          </mt-button>
        </div>
      </footer>
    </div>
    <mt-popup
      class="popup-box"
      v-model="showPopup"
      :closeOnClickModal="currentPopup === 'login' ? false : true"
      popup-transition="popup-fade"
    >
      <div class="show-close-box">
        <span class="close-icon" @click="setShowPopup(false)">
          <svg-icon icon-class="loginCloseIcon"></svg-icon>
        </span>
        <div class="login-box" v-show="currentPopup === 'login'">
          <div class="head">
            <h2>Log in to FishNovel</h2>
          </div>
          <div class="content" v-if="loginMode === 6">
            <div class="text">
              <h3 class="label">Email</h3>
              <!-- :state="emailStatus" -->
              <input
                ref="email-input"
                placeholder="Please enter email address."
                type="email"
                @blur="hideTips('email')"
                v-model="form.email"
              />
              <span id="email_hint" class="text_hint"></span>
            </div>
            <div class="text">
              <h3 class="label">Verify Code</h3>
              <div class="code-input-box">
                <input
                  ref="code-input"
                  placeholder="Please enter verification code."
                  type="text"
                  @blur="hideTips('code')"
                  @keyup.13="login(6)"
                  v-model="form.code"
                />
                <span
                  :class="timeText === '' ? 'getCode' : 'disabled'"
                  @click="getCode"
                  v-text="codeText + this.timeText"
                ></span>
              </div>
              <span id="code_hint" class="text_hint"></span>
            </div>
          </div>
          <div class="submit">
            <input type="submit" @click="login(loginMode)" value="Log in" />
          </div>
          <div class="foot">
            <div class="toggle-login">
              <span class="logo-facebook" @click="otherLogin(8)">
                <svg-icon icon-class="logoFacebook"></svg-icon>
              </span>
              <!-- <span class="logo-google" @click="otherLogin(7)">
                <svg-icon icon-class="logoGoogle"></svg-icon>
              </span>
              <span class="logo-apple" @click="otherLogin(10)">
                <svg-icon icon-class="logoApple"></svg-icon>
              </span> -->
            </div>
            <p class="login-describe">
              Unregistered FishNovel accounts will be automatically registered
              upon login
            </p>
          </div>
        </div>
        <div class="download-box" v-show="currentPopup === 'download'">
          <div class="head">
            <h2>Download FishNovel App</h2>
          </div>
          <div class="content">
            {{ downloadTip | downloadText }}
          </div>
          <div class="foot">
            <mt-button @click="toDownloadUrl('google')">
              <svg-icon icon-class="googleIcon" slot="icon"></svg-icon>
              Google Play
            </mt-button>
            <mt-button @click="toDownloadUrl('apple')">
              <svg-icon icon-class="appleIcon" slot="icon"></svg-icon>
              Apple Store
            </mt-button>
          </div>
        </div>
      </div>
      <div class="hide-close-box">
        <div class="pay-login-popup" v-show="currentPopup === 'loginReminder'">
          <h3 class="title">Reminder</h3>
          <p class="content">
            If you don't log in to the web, it's easy to lose your account. It's
            recommended that you log in to use.
          </p>
          <div class="foot-btn">
            <mt-button @click="popupVisible('cancel')" class="cancel"
              >Cancel</mt-button
            >
            <mt-button @click="popupVisible('to-login')" class="confirm"
              >Login</mt-button
            >
          </div>
        </div>
      </div>
    </mt-popup>
    <!-- 我的弹窗 -->
    <mt-popup class="my-popup-box" v-model="myPopup" position="right">
      <div class="user-box">
        <div class="head">
          <dl v-if="userInfo" class="userInfo">
            <dt>
              <img class="avatar" :src="userInfo.coverUrl" />
            </dt>
            <dd>
              <span class="ellipsis" v-text="userInfo.authorName"></span>
            </dd>
          </dl>
          <mt-button v-else class="login-btn" plain @click="toPage('login')"
            >Log in</mt-button
          >
        </div>
        <div @click="toPage('myAccount')" class="account-balance">
          <ul class="balance">
            <li
              class="coins"
              v-text="utils.tranNumber(balance.coinSum, 1)"
            ></li>
            <li
              class="bonus"
              v-text="utils.tranNumber(balance.archBalance, 1)"
            ></li>
          </ul>
          <mt-button class="top-up" plain>TOP UP</mt-button>
        </div>
        <div class="vip-card" :class="balance.isVip ? 'vip' : 'normal'">
          <h1>Premium</h1>
          <p
            class="desc"
            v-html="
              balance.isVip
                ? `Your expiration date：<br />${utils.dateFormat(
                    balance.endTime,
                    'MM-DD-YYYY HH:MM:SS'
                  )}`
                : 'Enjoy Free Reading And More Benefits'
            "
          ></p>
          <div class="foot">
            <mt-button
              class="toPremium"
              @click="toPage('premium')"
              plain
              v-text="balance.isVip ? 'Renew' : 'JION'"
            ></mt-button>
          </div>
        </div>
        <ul class="list">
          <li @click="toPage('bookshelf')">
            <svg-icon icon-class="bookSelf"></svg-icon>BookSelf
          </li>
          <li @click="toPage('reading-history')">
            <svg-icon icon-class="viewed"></svg-icon>Viewed
          </li>
          <li @click="toPage('sendFeedback')" :class="{ dot: feedbackNum }">
            <svg-icon icon-class="feedback"></svg-icon>Feedback
          </li>
        </ul>
        <div class="auto-subscribe">
          <span>Auto Next Chapter</span>
          <mt-switch
            @change="switchAutoSubscribe(autoSubscribe)"
            v-model="autoSubscribe"
          ></mt-switch>
        </div>
        <div class="logout" v-if="userInfo">
          <mt-button plain @click="logout">Log Out</mt-button>
          <span class="userId" v-text="userInfo && userInfo.authorId"></span>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import headerBar from "components/common/header/Header-bar.vue";
import navBar from "components/common/header/Nav-bar.vue";
import { mapMutations, mapGetters } from "vuex";
import { MessageBox } from "mint-ui";
export default {
  inject: ["reload"],
  filters: {
    downloadText(code) {
      let list = {
        default: "Discover much more brilliant stories in FishNovel App!",
        reader:
          "Continue to read more chapters and discover much more brilliant stories in FishNovel App!",
      };
      return list[code];
    },
  },
  data() {
    return {
      searchValue: "",
      loginMode: 6, // 邮箱:6  Facebook:8 GoogleOn:7
      // emailStatus: "", //邮箱验证状态
      form: {
        email: "",
        code: "",
      },
      codeText: "GET", //获取验证码文字
      timeText: "", //倒计时
      logoutPopup: false, //退出登录弹框
      navList: [
        {
          id: "1",
          url: "/home",
          navName: "Home",
          name: "home",
          children: [],
        },
        {
          id: "2",
          url: "/library",
          name: "libraryView",
          navName: "Library",
        },
        {
          id: "3",
          url: "/rankings",
          name: "rankingsView",
          navName: "Rankings",
        },
        // {
        //     id: "4",
        //     url:"/author-welfare",
        //     navName:"Author Welfare",
        // },
        {
          id: "5",
          url: "/download",
          name: "downloadApp",
          navName: "Download App",
        },
      ],
      footList: [
        {
          title: "ABOUT",
          list: [
            { txt: "About us" },
            { txt: "Contact us" },
            { txt: "Join us" },
            { txt: "Help" },
          ],
        },
        {
          title: "MENU",
          list: [
            { txt: "Home" },
            { txt: "Library" },
            { txt: "List" },
            { txt: "Author Welfare" },
            { txt: "Writers Zone" },
          ],
        },
        {
          title: "POLICY",
          list: [
            { txt: "Terms of Service" },
            { txt: "Privacy Policy" },
            { txt: "Version Policy" },
          ],
        },
      ],
      username: "", //用户名
      openid: null,
      fbSignInParams: {
        scope: "email,user_likes",
        return_scopes: true,
      },
      myPopup: false, //我的弹窗
      autoSubscribe: false,
      feedbackNum: 0, // 未读反馈数量
    };
  },
  components: {
    headerBar,
    navBar,
  },
  computed: {
    ...mapGetters(["balance", "userInfo", "currentPopup", "downloadTip"]),
    showPopup: {
      get() {
        return this.$store.getters.showPopup;
      },
      set(val) {
        this.setShowPopup(val);
      },
    },
    dishidden() {
      if (this.myPopup || this.showPopup) {
        document.querySelector("body").setAttribute("style", "overflow:hidden");
        return true;
      } else {
        document.querySelector("body").removeAttribute("style");
        return false;
      }
    },
    key() {
      return this.$route.meta.update
        ? this.$route.name + +new Date()
        : this.$route.name;
    },
  },
  watch: {},
  created() {
    if (!this.utils.seekStore("local_user")) {
      //获取用户注册当天最后一秒时间戳
      let todayYear = new Date().getFullYear();
      let todayMonth = new Date().getMonth();
      let todayDay = new Date().getDate();
      let todayTime = new Date(
        todayYear,
        todayMonth,
        todayDay,
        "23",
        "59",
        "59"
      ).getTime(); //毫秒
      let userInfo = {
        userId: this.genID(5),
        todayTime, //注册当日最后时间戳  Date.now - todayTime 判断是否为新用户
        createTime: Date.now(), //注册时间
      };
      this.utils.setStore("local_user", userInfo);
    }
    // 防止重複載入
    // if (window.FB) {
    // window.fbAsyncInit = function () {
    //   FB.init({
    //     appId: "397178182150767", // 填入自己 app 的 id
    //     cookie: true,
    //     autoLogAppEvents: true,
    //     xfbml: true,
    //     version: "v13.0", // 目前版本
    //   });
    //   FB.AppEvents.logPageView();
    //   // FB.AppEvents.logEvent("{my_app_event}");
    //   // FB.getLoginStatus((response) => {
    //   //   statusChangeCallback(response);
    //   // });
    // };
    // (function (d, s, id) {
    //   console.log(d, s, id);
    //   var js,
    //     fjs = d.getElementsByTagName(s)[0];
    //   console.log(d.getElementById(id));
    //   if (d.getElementById(id)) {
    //     return;
    //   }
    //   js = d.createElement(s);
    //   js.id = id;
    //   js.src = "https://connect.facebook.net/en_US/sdk.js";
    //   fjs.parentNode.insertBefore(js, fjs);
    // })(document, "script", "facebook-jssdk");
    // }
  },
  mounted() {
    this.$nextTick(() => {
      let cancel = this.$refs.mtSearch.$el.querySelectorAll(
        ".mint-searchbar-cancel"
      )[0];
      cancel.onclick = () => {
        this.close(); // 取消事件
      };
    });
    if (this.userInfo) {
      this.getUserBalanceAndVip();
    }
    if (!sessionStorage.getItem("disable_update")) {
      sessionStorage.setItem("disable_update", true);
      this.$api.logger.user_analysis({ logType: 0 });
    }
  },
  methods: {
    ...mapMutations({
      setBalance: "SET_BALANCE",
      setLoginInfo: "SET_LOGININFO",
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    // 生成随机ID
    genID(length) {
      return Math.random().toString().substr(3, length) + Date.now();
    },
    toggleNav(item) {
      if (item.name === "downloadApp") {
        this.setCurrentPopup({
          currentPopup: "download",
          downloadTip: "default",
        });
        this.setShowPopup(true);
      } else {
        this.$router.push(item.url);
        // 重复点击nav刷新
        if (item.name === this.$route.name) {
          setTimeout(() => {
            this.reload();
          }, 20);
        }
      }
    },
    goHome() {
      if (this.$route.name === "home") {
        this.reload();
      } else {
        this.$router.push({ name: "home" });
      }
    },
    search(keywords) {
      document.activeElement.blur(); //关闭手机键盘
      this.$router.push({
        name: "search",
        params: { keywords },
      });
    },
    close() {
      //   this.$router.back(-1);
    },
    async popupVisible(flag) {
      if (flag === "login") {
        if (this.userInfo) {
          this.myPopup = true;
          if (localStorage.getItem("readPattern") != null) {
            let localShelf = JSON.parse(localStorage.getItem("readPattern"));
            this.autoSubscribe = localShelf.autoSubscribe;
          }
          // 查询未读反馈
          let res = await this.$api.home.getNoReadFeedbackCount({});
          if (res.code === 1) {
            this.feedbackNum = res.source;
          }
        } else {
          this.toPage("login");
        }
      } else if (flag === "cancel") {
        this.setShowPopup(false);
      } else if (flag === "to-login") {
        this.setCurrentPopup({ currentPopup: "login" });
        this.setShowPopup(true);
      }
    },
    // 获取用户余额信息
    async getUserBalanceAndVip() {
      let res = await this.$api.home.getUserBalanceAndVip({});
      if (res.code === 1) {
        this.setBalance(res.source);
        // console.log(res.source);
      }
    },
    //退出登录
    logout() {
      this.myPopup = false;
      this.logoutPopup = false;
      this.setLoginInfo(null);
      this.setBalance({
        archBalance: 0,
        coinSum: 0,
        isVip: 0,
        isNew: 0,
      });
      localStorage.removeItem("fn_m_balance");
      // 檢查登入狀態
      window.FB.getLoginStatus(function (response) {
        // 檢查登入狀態
        if (response.status === "connected") {
          // 移除授權
          window.FB.api("/me/permissions", "DELETE", function () {
            // 用戶登出
            window.FB.logout();
          });
        } else {
          // do something
        }
      });
    },
    // 获取验证码
    async getCode() {
      if (this.checkEmpty("email")) {
        if (this.hideTips("email")) {
          let time = 60;
          this.codeText = "Reacquire ";
          this.timeText = time + "S";
          let sendTimer = setInterval(() => {
            time--;
            this.timeText = time + "S";
            if (time < 0) {
              clearInterval(sendTimer);
              this.codeText = "GET";
              this.timeText = "";
            }
          }, 1000);
          let params = {
            emailUrl: this.form.email,
          };
          let res = await this.$api.login.code(params);
          if (res.code === 200031) {
            // 发送过于频繁
            document.getElementById("email_hint").innerHTML =
              "Please try again later";
          } else if (res.code === 200030) {
            // 未进行实名认证
            document.getElementById("email_hint").innerHTML =
              "The real-name authentication is not performed";
          }
          //  else {
          //   // 其他 -这不是一个有效的邮箱
          //   document.getElementById("email_hint").innerHTML =
          //     "That is not a valid email address.";
          // }
        }
      }
    },
    otherLogin(mode) {
      // Facebook登录
      if (mode === 8) {
        window.FB.getLoginStatus((response) => {
          // 登入狀態 - 已登入
          if (response.status === "connected") {
            // 獲取用戶個人資料
            this.getProfile(mode);
          } else {
            // 登入狀態 - 未登入
            // 用戶登入(確認授權)
            window.FB.login(
              () => {
                // 獲取用戶個人資料
                this.getProfile(mode);
              },
              // 授權 - 個人資料&Email
              { scope: "public_profile,email" }
            );
          }
        });
      }
    },
    async login(mode) {
      let params;
      // 邮箱登录
      if (mode === 6) {
        let isEmpty = this.checkEmpty("email") && this.hideTips("email");
        if (isEmpty) {
          if (this.checkEmpty("code")) {
            params = {
              code: this.form.code,
              openid: this.form.email,
              type: mode,
            };
          }
        }
      } else if (mode === 7) {
        // Google登录
        // params = {
        //   openid: this.googleId,
        //   headImgUrl: this.googleImg,
        //   nickname: this.googleusername,
        //   type: this.is_type,
        // }
      } else if (mode === 8) {
        // Facebook登录
        params = {
          openid: this.openid,
          nickname: this.username,
          type: 8,
        };
      }
      let res = await this.$api.login.login(params);
      if (res.code === 1) {
        this.setShowPopup(false);
        this.setLoginInfo(res.source);
        await this.getUserBalanceAndVip();
        this.reload();
        // 用户数据日志
        // setTimeout(() => {
        this.$api.logger.user_analysis({ logType: 1 });
        // }, 1314);
      } else if (res.code === 200015) {
        document.getElementById("code_hint").innerHTML =
          "That is not a valid verification code.";
      } else {
        MessageBox({
          title: "",
          message: "Login failed, please try again.",
          confirmButtonText: "OK",
        }).then(() => {
          let ele = document.querySelector(".mint-msgbox-wrapper");
          ele.classList.remove("login-err-msg");
        });
        let ele = document.querySelector(".mint-msgbox-wrapper");
        ele.classList.add("login-err-msg");
      }
    },
    // 获取个人资料
    getProfile(mode) {
      if (mode === 8) {
        window.FB.api("/me?fields=name,id,email", (res) => {
          if (res.id) {
            this.username = res.name;
            this.openid = res.id;
            this.login(8);
          }
        });
      }
    },
    // 验证邮箱/验证码是否为空 提示
    checkEmpty(text) {
      if (text === "email") {
        let span = document.getElementById("email_hint");
        let input = this.$refs["email-input"];
        if (this.form.email) {
          span.innerHTML = "";
          input.classList.remove("error");
          return true;
        } else {
          span.innerHTML = "Email is required.";
          input.classList.add("error");
          return false;
        }
      } else if (text === "code") {
        let span = document.getElementById("code_hint");
        let input = this.$refs["code-input"];
        if (this.form.code) {
          span.innerHTML = "";
          input.classList.remove("error");
          return true;
        } else {
          span.innerHTML = "Verification code is required.";
          input.classList.add("error");
          return false;
        }
      }
    },
    // 邮箱焦点离开事件 - 判断邮箱格式
    hideTips(text) {
      if (text === "email") {
        let span = document.getElementById("email_hint");
        let input = this.$refs["email-input"];
        if (this.form.email) {
          if (this.checkEmail(this.form.email)) {
            span.innerHTML = "";
            input.classList.remove("error");
            return true;
          } else {
            span.innerHTML = "That is not a valid email address.";
            input.classList.add("error");
            return false;
          }
        } else {
          span.innerHTML = "";
          input.classList.remove("error");
          return false;
        }
      } else if (text === "code") {
        let span = document.getElementById("code_hint");
        // 验证码错误提示
        if (this.form.code) {
          return true;
        } else {
          span.innerHTML = "";
          return false;
        }
      }
      // if(val) {
      //   if(text === "email") {
      //     if(this.checkEmail(val)) {
      //       span.innerHTML = "";
      //       return true;
      //     } else {
      //       span.innerHTML = "That is not a valid email address."
      //       return false;
      //     }
      //   } else if(text === "code") {
      //     span.innerHTML = "";
      //     return true;
      //   }
      // } else {
      //   if(text === "email") {
      //     span.innerHTML = "Email is required.";
      //   } else if(text === "code") {
      //     span.innerHTML = "Verification code is required.";
      //   }
      //   return false;
      // }
    },
    // 校验邮箱
    checkEmail(strEmail) {
      var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (emailReg.test(strEmail)) {
        return true;
      } else {
        return false;
      }
    },
    // form初始化
    init() {
      this.form = {
        email: "",
        code: "",
      };
      this.loginMode = 6;
      document.getElementById("email_hint").innerHTML = "";
      document.getElementById("code_hint").innerHTML = "";
    },
    toDownloadUrl(str) {
      if (str === "google") {
        let newWindow = window.open("_blank");
        setTimeout(function () {
          if (newWindow) {
            newWindow.location =
              "https://play.google.com/store/apps/details?id=com.youhe.fishoverseas";
          }
          window.location =
            "https://play.google.com/store/apps/details?id=com.youhe.fishoverseas"; //android下载地址
        }, 1000);
      } else if (str === "apple") {
        window.open(
          "https://apps.apple.com/US/app/id1601600834?mt=8",
          "_blank"
        );
      }
    },
    // 跳转书币充值页面
    toPage(name) {
      if (name === "login") {
        // 打开登录弹窗
        this.init();
        this.setCurrentPopup({ currentPopup: "login" });
        this.setShowPopup(true);
      } else {
        this.myPopup = false;
        this.$router.push({
          name,
        });
      }
    },
    switchAutoSubscribe(state) {
      let localShelf;
      if (localStorage.getItem("readPattern") != null) {
        localShelf = JSON.parse(localStorage.getItem("readPattern"));
        localShelf.autoSubscribe = state;
      } else {
        localShelf = {
          fontSize: 16, //字体大小
          patternActive: 0, //Colour下标
          autoSubscribe: state, //自动订阅下一章
        };
      }
      localStorage.setItem("readPattern", JSON.stringify(localShelf));
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  .fluid {
    .banner-back {
      width: 100%;
      height: 168px;
      .top-box {
        width: 100%;
        height: 168px;
        z-index: 999;
        position: fixed;
        left: 0;
        top: 0;
        background: linear-gradient(90deg, #ef6a59 0%, #e25176 100%);
      }
    }
    .home-header-bar {
      height: 100%;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo {
        .svg-icon {
          width: 44px;
          height: 44px;
        }
      }
      .mint-search {
        // width: 454px;
        height: 44px;
        margin: 0 20px;
        flex: 5;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 22px;
        ::v-deep .mint-searchbar {
          height: 100%;
          padding: 0;
          background: none;
          .mint-searchbar-inner {
            height: 100%;
            background: none;
            .mintui-search {
              color: #fff;
              padding: 0 8px;
              font-size: 20px;
            }
            .mint-searchbar-core {
              color: #fff;
              background: none;
            }
            ::-webkit-input-placeholder {
              color: #fff;
              opacity: 0.6;
            }
          }
          > .mint-searchbar-cancel {
            color: #fff;
            padding: 0 15px;
          }
        }
        ::v-deep .mint-search-list {
          display: none;
        }
      }
      .userInfo {
        // width: 208px;
        height: 44px;
        flex: 2 0;
        position: relative;
        display: flex;
        align-items: center;
        dt {
          width: 44px;
          height: 44px;
          margin-right: 14px;
          .avatar {
            width: 44px;
            height: 44px;
            border-radius: 22px;
            display: block;
          }
        }
        dd {
          width: 150px;
          height: 44px;
          display: flex;
          align-items: center;
          .ellipsis {
            width: 114px;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-size: 24px;
            color: #fff;
            display: inline-block;
          }
          .svg-icon {
            width: 36px;
            height: 21px;
          }
        }
        .popup-box {
          .logout-img {
            width: 356px;
            height: 128px;
            display: block;
            z-index: 2;
            position: absolute;
            top: 64px;
            right: 0;
          }
          .modal {
            width: 100%;
            height: 100%;
            z-index: 1;
            position: fixed;
            top: 0;
            left: 0;
          }
        }
      }
      .login-btn {
        width: 112px;
        height: 44px;
        color: #fff;
        border-radius: 22px;
        border: 1px solid #fff;
      }
    }
    .home-nav-bar {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      overflow-y: hidden;
      overflow-x: auto;
      display: flex;
      .nav-li {
        padding: 0 25px;
        font-size: 28px;
        white-space: nowrap;
        color: #fff;
        opacity: 0.6;
        &.active {
          opacity: 1;
        }
      }
    }
    > main {
      margin-top: 5px;
      min-height: calc(100vh - 168px);
    }
    > footer {
      width: 100%;
      height: 440px;
      box-sizing: border-box;
      padding: 0 40px;
      font-size: 20px;
      color: #fff;
      background: #e86472;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p {
        opacity: 0.6;
      }
      .foot-list {
        display: flex;
        justify-content: space-between;
        p {
          font-weight: 600;
          margin-bottom: 12px;
        }
        li {
          margin-bottom: 3px;
          line-height: 28px;
          font-weight: 500;
          font-family: PingFang-SC-Medium, PingFang-SC;
        }
      }
      .foot-down {
        display: flex;
        justify-content: space-around;
        .mint-button {
          width: 278px;
          height: 56px;
          color: #fff;
          font-weight: 600;
          font-family: PingFangSC-Semibold, PingFang SC;
          background: #e86472;
          border-radius: 50px;
          border: 2px solid #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          .mint-button-icon {
            .svg-icon {
              width: 21px;
              height: 26px;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
  .popup-box {
    border-radius: 24px;
    .show-close-box {
      .close-icon {
        .svg-icon {
          width: 48px;
          height: 48px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .login-box {
        width: 698px;
        height: 904px;
        padding: 44px 49px;
        box-sizing: border-box;
        background: url(../assets/images/login-back.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        .head {
          text-align: center;
          margin: 10px 0 44px 0;
          h2 {
            font-size: 34px;
            color: #000;
            line-height: 48px;
          }
        }
        .content {
          .text {
            margin-bottom: 20px;
            .label {
              color: #333;
              margin-bottom: 12px;
            }
            input {
              width: 100%;
              height: 64px;
              padding: 0 18px;
              box-sizing: border-box;
              font-size: 28px;
              border-radius: 8px;
              background: #f5f5f5;
              border: 1px solid #d5d5d5;
              &:focus {
                outline: none;
                border: 1px solid #f55651;
              }
              &.error {
                border-color: #f55651;
                box-shadow: 0px 0px 0px 4px #ffdbda;
              }
            }
            .code-input-box {
              position: relative;
              > span {
                width: auto;
                height: 64px;
                font-size: 28px;
                font-weight: 500;
                line-height: 64px;
                padding: 0 18px;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                font-family: PingFangSC-Medium, PingFang SC;
                &.getCode {
                  color: #f55651;
                }
                &.disabled {
                  color: #a4a4a4;
                  pointer-events: none;
                }
              }
            }
            .text_hint {
              height: 28px;
              margin-top: 6px;
              display: block;
              line-height: 28px;
              color: #f55651;
              font-family: PingFangSC-Regular, PingFang SC;
            }
          }
        }
        .submit {
          input {
            width: 100%;
            height: 64px;
            margin: 24px 0 63px 0;
            font-size: 28px;
            font-weight: 600;
            color: #fff;
            border: none;
            border-radius: 8px;
            background: linear-gradient(90deg, #ee685a 0%, #e25177 100%);
          }
        }
        .foot {
          border-top: 2px solid #eeeeee;
          &::before {
            content: "OR";
            width: 86px;
            height: 40px;
            display: block;
            font-size: 28px;
            background: #fff;
            font-weight: 600;
            color: #333;
            text-align: center;
            margin: -15px auto;
          }
          .toggle-login {
            display: flex;
            justify-content: space-around;
            margin: 63px 0 44px 0;
            .svg-icon {
              width: 58px;
              height: 58px;
            }
          }
          .login-describe {
            text-align: center;
            color: #666666;
            line-height: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
          }
        }
      }
      .download-box {
        width: 698px;
        height: 534px;
        padding: 30px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .head {
          font-size: 34px;
          color: #000;
        }
        .content {
          font-size: 28px;
          color: #000;
          line-height: 40px;
          font-weight: 500;
          text-align: center;
          font-family: PingFang-SC-Medium, PingFang-SC;
        }
        .foot {
          display: flex;
          flex-direction: column;
          .mint-button {
            width: 320px;
            height: 88px;
            font-size: 30px;
            color: #fff;
            background: #e86472;
            border-radius: 10px;
            border-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            &:last-child {
              margin-top: 40px;
            }
            .mint-button-icon {
              .svg-icon {
                width: 21px;
                height: 26px;
                margin-right: 15px;
              }
            }
          }
        }
      }
    }
    .hide-close-box {
      .pay-login-popup {
        width: 624px;
        height: 453px;
        background: #ffffff;
        border-radius: 32px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        .title {
          font-size: 32px;
          font-weight: 600;
          line-height: 53px;
        }
        .content {
          padding: 0 26px;
          color: #333333;
          font-size: 30px;
          font-weight: 500;
          line-height: 49px;
        }
        .foot-btn {
          width: 100%;
          display: flex;
          justify-content: space-around;
          .mint-button {
            width: 250px;
            height: 88px;
            font-size: 32px;
            color: #999999;
            font-weight: 500;
            background: #eeeeee;
            border-radius: 16px;
            &.confirm {
              color: #ffffff;
              background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
            }
          }
        }
      }
    }
  }
  .my-popup-box {
    height: 100%;
    .user-box {
      width: 400px;
      height: 100%;
      padding: 0 30px;
      display: flex;
      flex-direction: column;
      .head {
        margin: 56px 0 56px 0;
        .userInfo {
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          dt {
            width: 60px;
            height: 60px;
            margin-right: 16px;
            .avatar {
              width: 60px;
              height: 60px;
              border-radius: 30px;
              display: block;
            }
          }
          dd {
            width: calc(100% - 76px);
            color: #333333;
            font-weight: 500;
            font-size: 34px;
            font-family: Poppins-Medium, Poppins;
          }
        }
        .login-btn {
          width: 100%;
          height: 56px;
          font-size: 26px;
          color: #e86472;
          border-radius: 28px;
          border: 2px solid #e86472;
        }
      }
      .account-balance {
        > ul.balance {
          display: flex;
          justify-content: space-around;
          li {
            text-align: center;
            font-size: 40px;
            line-height: 40px;
            color: #333333;
            display: flex;
            flex-direction: column;
            font-weight: 600;
            &::after {
              font-size: 26px;
              line-height: 43px;
              margin-top: 8px;
              color: #999999;
              font-weight: 400;
            }
            &.coins::after {
              content: "COINS";
            }
            &.bonus::after {
              content: "Bonus";
            }
          }
        }
        > .top-up {
          width: 100%;
          height: 60px;
          margin-top: 24px;
          font-weight: 600;
          font-size: 26px;
          color: #ffffff;
          border-radius: 12px;
          border-width: 0;
          background: linear-gradient(90deg, #f6764a 0%, #e04e7c 100%);
        }
      }
      .vip-card {
        width: 100%;
        height: 225px;
        margin: 56px 0;
        padding: 20px 25px;
        box-sizing: border-box;
        border-radius: 28px;
        &.vip {
          background: #eec182;
          color: #ffffff;
          .foot {
            .mint-button {
              color: #f5b14b;
            }
          }
        }
        &.normal {
          background: #bec2ce;
          color: #737a93;
          .foot {
            .mint-button {
              color: #737a93;
            }
          }
        }
        > h1 {
          font-size: 40px;
        }
        > p.desc {
          margin: 15px 0;
          line-height: 30px;
          font-size: 26px;
          font-family: Poppins-Medium;
        }
        > .foot {
          .mint-button {
            width: 100%;
            height: 56px;
            font-size: 26px;
            font-weight: 600;
            border-radius: 12px;
            border-width: 0;
            background: #ffffff;
          }
        }
      }
      > .list {
        overflow-y: auto;
        li {
          margin-bottom: 30px;
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 32px;
          font-weight: 500;
          line-height: 53px;
          text-indent: 16px;
          .svg-icon {
            width: 56px;
            height: 56px;
          }
          &.dot::after {
            content: "";
            width: 16px;
            height: 16px;
            margin-left: 6px;
            margin-bottom: auto;
            border-radius: 16px;
            background: #e86472;
          }
        }
      }
      > .auto-subscribe {
        width: 100%;
        height: 43px;
        font-size: 26px;
        font-weight: 500;
        color: #333333;
        margin-top: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .mint-switch {
          ::v-deep.mint-switch-core {
            background: #e86472;
            border-color: #e86472;
          }
        }
      }
      > .logout {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        .mint-button {
          width: 170px;
          height: 56px;
          font-size: 26px;
          color: #999999;
          border-radius: 28px;
          border: 2px solid #eeeeee;
        }
        .userId {
          margin: 26px 0;
          line-height: 43px;
          font-size: 26px;
          color: #999999;
          &::before {
            content: "User id:";
            margin-right: 6px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.mint-msgbox-wrapper {
  .mint-msgbox {
    width: 698px;
    height: 400px;
    border-radius: 16px;
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .mint-msgbox-content {
      border-width: 0;
      .mint-msgbox-message {
        font-size: 34px;
        font-weight: bold;
        font-family: PingFang-SC-Bold, PingFang-SC;
        color: #000000;
      }
    }
    .mint-msgbox-btns {
      .mint-msgbox-btn {
        width: 100%;
        height: 64px;
        color: #fff;
        font-weight: 600;
        font-size: 28px;
        border-radius: 8px;
        background: linear-gradient(90deg, #ee685a 0%, #e25177 100%);
      }
    }
  }
}
</style>
